<template>
  <Layout>
    <div class="team-detail">
      <!-- 面包屑导航 -->
      <div class="breadcrumb">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item>
            <router-link to="/home" class="breadcrumb-link">首页</router-link>
          </el-breadcrumb-item>
          <el-breadcrumb-item>
            <router-link to="/volunteer-team" class="breadcrumb-link">志愿队伍</router-link>
          </el-breadcrumb-item>
          <el-breadcrumb-item>
            <span class="current-page">队伍详情</span>
          </el-breadcrumb-item>
        </el-breadcrumb>
      </div>

      <div class="detail-content" v-if="teamInfo">
        <div class="team-header">
          <div class="team-logo">
            <img :src="teamInfo.avatarUrl" alt="队伍logo">
          </div>
          <div class="team-basic">
            <h1>{{teamInfo.organizationName}}</h1>
            <div class="team-meta">
              <span>成立时间: {{formatDate(teamInfo.establishmentDate)}}</span>
              <span>所属区域: {{teamInfo.region}}</span>
              <span>队伍人数: {{teamInfo.personnelScale}}人</span>
            </div>
            <div class="team-rating">
              <el-rate
                v-model="teamInfo.starRating"
                disabled
                show-score
                text-color="#ff9900"
                score-template="{value}分"
              />
            </div>
            <div class="join-team">
              <el-button type="primary" @click="handleJoinTeam" :loading="joining">
                加入队伍
              </el-button>
            </div>
          </div>
        </div>

        <div class="team-section">
          <h2>队伍简介</h2>
          <p>{{teamInfo.organizationProfile}}</p>
        </div>

        <div class="team-section">
          <h2>联系方式</h2>
          <p>联系人: {{teamInfo.contactPerson}}</p>
          <p>详细地址: {{teamInfo.detailedAddress}}</p>
        </div>

        <div class="team-section">
          <h2>满意度评价</h2>
          <div class="satisfaction-grid">
            <div class="satisfaction-item">
              <span class="label">培训满意度</span>
              <el-rate v-model="teamInfo.trainingSatisfaction" disabled />
            </div>
            <div class="satisfaction-item">
              <span class="label">合作满意度</span>
              <el-rate v-model="teamInfo.cooperationSatisfaction" disabled />
            </div>
            <div class="satisfaction-item">
              <span class="label">执行规范度</span>
              <el-rate v-model="teamInfo.executionCompliance" disabled />
            </div>
          </div>
        </div>
      </div>

      <div v-else class="loading">
        <el-skeleton :rows="6" animated />
      </div>
    </div>
  </Layout>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import Layout from '../components/Layout.vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'

const route = useRoute()
const teamInfo = ref(null)
const joining = ref(false)

const formatDate = (dateStr) => {
  if (!dateStr) return ''
  const date = new Date(dateStr)
  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
}

const getTeamDetail = async () => {
  try {
    const response = await axios.get(`http://localhost:9090/organizations/${route.params.id}`)
    teamInfo.value = response.data
  } catch (error) {
    console.error('获取队伍详情失败:', error)
  }
}

const handleJoinTeam = async () => {
  if(localStorage.getItem('type') === null) {
      ElMessage.error('请先登录')
    }
  joining.value = true
  try {
    if(localStorage.getItem('type') === 'admin') {
      ElMessage.error('当前账号为管理员，无法加入志愿队伍，请切换账号再进行操作！')
      return
    }
    // 构建更新对象
    const updateData = {
      volunteerId: localStorage.getItem('volunteerId'), // 从localStorage获取志愿者ID
      organizationIds: route.params.id // 设置要加入的组织ID列表
    }
    
    // 调用更新接口
    const response = await axios.put('http://localhost:9090/volunteers/joinTeam', updateData)
    
    if (response.data.success) {
      ElMessage.success('加入团队成功!')
    } else {
      if (response.data.message === '已加入该团队') {
        ElMessage.warning('已加入该团队')
      } else {
        ElMessage.error(response.data.message || '加入团队失败')
      }
    }
  } catch (error) {
    ElMessage.error('加入团队失败，请稍后重试')
    console.error('加入队伍失败:', error)
  } finally {
    joining.value = false
  }
}

onMounted(() => {
  getTeamDetail()
})
</script>

<style scoped>
.team-detail {
  padding: 20px;
}

.breadcrumb {
  margin-bottom: 20px;
  padding: 12px 20px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}

.breadcrumb-link {
  color: #666;
  text-decoration: none;
  transition: color 0.3s;
}

.breadcrumb-link:hover {
  color: #dd2b2b;
}

.current-page {
  color: #dd2b2b;
  font-weight: 500;
}

.detail-content {
  background: #fff;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}

.team-header {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
}

.team-logo {
  width: 120px;
  height: 120px;
  margin-right: 30px;
}

.team-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid #f0f0f0;
}

.team-basic h1 {
  margin: 0 0 15px 0;
  color: #333;
}

.team-meta {
  display: flex;
  gap: 20px;
  color: #666;
  margin-bottom: 10px;
}

.team-rating {
  margin-top: 10px;
}

.join-team {
  margin-top: 15px;
}

.team-section {
  margin-bottom: 30px;
  background: #f9f9f9;
  padding: 20px;
  border-radius: 8px;
}

.team-section h2 {
  font-size: 18px;
  color: #333;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 2px solid #dd2b2b;
}

.team-section p {
  color: #666;
  line-height: 1.6;
}

.satisfaction-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.satisfaction-item {
  text-align: center;
  padding: 15px;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.satisfaction-item .label {
  display: block;
  margin-bottom: 10px;
  color: #333;
  font-weight: 500;
}

.loading {
  padding: 50px;
  background: #fff;
  border-radius: 8px;
}
</style>